<template>
  <el-dialog
    :title="pageFrom.id?'编辑页面':'新增页面'"
    :visible="dialogVisible"
    width="60%"
    @close="closeDialog"
  >
    <el-form ref="form" :model="pageFrom" label-width="80px" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="pageFrom.title" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-upload
          style="display: none"
          class="quill-picture-uploader"
          action="#"
          :before-upload="bfUpload"
          :http-request="successFn"
        />
        <quill-editor ref="myQuillEditor" v-model="pageFrom.content" class="myQuillEditor" :options="editorOption" prop="content" @blur="contentBlur" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click.native="confirmFn">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
  SecretId: 'AKIDXxBByWqxqVv75oKbfU5SaU9anna9TZR5',
  SecretKey: 'QaU8WfX9VdV7SXMxDH7j6EAvSlqgIfoj'
})
import { addPages, updatePages } from '@/api/pages'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      editorOption: {
        placeholder: '请输入...',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ color: [] }, { background: [] }],
              ['link', 'image'],
              ['blockquote', 'code-block'],
              [{ align: [] }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }],
              [{ header: 1 }, { header: 2 }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ size: ['small', false, 'large', 'huge'] }],
              [{ font: [] }],
              [{ indent: '-1' }, { indent: '+1' }]
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector('.quill-picture-uploader input').click() // 核心
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      pageFrom: {
        title: '',
        content: '',
        id: ''
      },
      //   校验规则
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '标题长度为2-10字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }

        ]
      }

    }
  },
  methods: {
    closeDialog() {
      // 清空表单
      this.pageFrom = {
        title: '',
        content: '',
        id: ''
      }
      // 清空表单验证
      this.$refs.form.resetFields()
      // 关闭弹窗
      this.$emit('update:dialogVisible', false)
    },

    // 新增页面/编辑功能
    async confirmFn() {
      // 判断是编辑还是新增
      if (this.pageFrom.id) {
        await this.$refs.form.validate() // 表单再次验证
        await updatePages(this.pageFrom)// 调编辑接口
      } else {
        await this.$refs.form.validate() // 表单再次验证
        await addPages(this.pageFrom) // 调新增页面接口
        this.$emit('updateCount') // 刷新页面数
      }

      this.closeDialog()//  关闭弹窗
      this.$emit('updatePagesList')// 刷新页面
    },

    // 富文本编辑器失去焦点时间，校验规则
    contentBlur() {
      this.$refs.form.validateField('content')
    },

    // 上传图片之前校验
    bfUpload(file) {
      if (file.type == 'image/png' || file.type == 'image/jpeg') {
      } else {
        this.$message.error('图片插入失败,请检查文件格式')
        return
      }
    },
    // 上传图片
    successFn(res) {
      // res:res就是我们上传的图片对象
      // 注意：我们上传给后端的对象是res.file
      // 给数组新增一个空的对象
      // 这里push对象的时候，必须先添加url属性，否则图片就不会显示
      // vue是没有办法监听到后面添加的属性，所以要提前添加属性
      this.fileList.push({ url: '' })
      // res:res就是我们上传的图片对象
      // 注意：我们上传给后端的对象是 res.file
      cos.putObject({
        Bucket: 'hr-project-77-1312874506', /* 必须 -- 存储桶的名字 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 -- 上传的文件名 -- 字符串 */
        StorageClass: 'STANDARD',
        Body: res.file, // 上传文件对象
        onProgress: (progressData) => {
        // 上传的进度
        // console.log(JSON.stringify(progressData))
        // console.log(60, progressData)
        // 动态设置进度，注意：要把当前函数改为箭头函数
          this.percent = progressData.percent * 100
        }
        // 箭头函数没有this
      }, (err, data) => {
        // data.Location 就是腾讯云返回的图片在线地址
        // 注意：使用data.Location地址访问图片的时候需要拼接 http://
        if (!err) {
          // 保存返回的图片在线地址 -- 上传成功后把腾讯云返回的图片在线地址保存到url属性上
          this.fileList[0].url = 'http://' + data.Location
          this.insertImg(this.fileList[0].url)
        }
      })
    },
    // 插入图片
    insertImg(url) {
      const quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      const length = quill.getSelection().index
      // 插入图片
      quill.insertEmbed(length, 'image', url)
      // 移动光标到图片后
      quill.setSelection(length + 1)
    }

  }
}
</script>

<style>
.ql-container {
    height: 200px;
}
.ql-toolbar {
    line-height: 6px;
}
</style>

